@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
        * {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: radial-gradient(circle at center, #0f2027, #203a43, #2c5364);color: #fff;min-height: 100vh;display: flex;flex-direction: column;align-items: center;padding: 60px;}header {text-align: center;margin-bottom: 30px;width: 100%;}h1 {font-size: 5rem;color: #dbedf3;margin-bottom: 10px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}.container {width: 100%;max-width: 62%;padding: 25px;}.controls {display: flex;justify-content: center;gap: 20px;margin-bottom: 25px;flex-wrap: wrap;}.control-btn {background: rgba(255, 255, 255, 0.2);padding: 12px 25px;border-radius: 8px;color: white;font-size: 1rem;cursor: pointer;display: flex;align-items: center;}.control-btn:hover {background: rgba(255, 255, 255, 0.3);}.keyboard-container {position: relative;width: 100%;overflow-x: auto;padding: 15px;min-height: 400px;display: flex;flex-direction: column;align-items: center;justify-content: center;}.piano-group {margin: 15px 0;display: flex;flex-direction: column;align-items: center;}.piano-keyboard {display: flex;position: relative;height: 300px;margin: 0 auto;}.white-keys {display: flex;position: relative;z-index: 1;}.black-keys {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}.white-key {width: 80px;height: 100%;background: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);border: 2px solid #bbb;border-radius: 0 0 8px 8px;margin-right: -2px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);position: relative;}.white-key.active {background: linear-gradient(to bottom, #ffd700 0%, #ffaa00 100%);box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);transform: translateY(4px);}.black-key {position: absolute;width: 48px;margin-left: 10px;height: 60%;background: linear-gradient(to bottom, #000 0%, #333 100%);border: 2px solid #444;border-radius: 0 0 6px 6px;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);}.black-key.active {background: linear-gradient(to bottom, #ffd700 0%, #ff8000 100%);box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);transform: translateY(4px);}.key-label {position: absolute;bottom: 25px;width: 100%;text-align: center;font-size: 18px;font-weight: bold;color: #333;}.black-key .key-label {color: #fff;bottom: 20px;font-size: 16px;}.active .key-label {color: #b30000;}.script-controls {margin: 20px 0;width: 100%;}.script-input-container {background: rgba(255, 255, 255, 0.1);padding: 20px;border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.2);}.script-input-container h3 {color: #dbedf3;margin-bottom: 15px;text-align: center;}#script-input {width: 100%;height: 80px;padding: 12px;border-radius: 8px;background: rgba(0, 0, 0, 0.6);color: white;font-family: 'Courier New', monospace;font-size: 16px;resize: vertical;margin-bottom: 15px;}#script-input:focus {outline: none;border-color: #ffd700;box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);}.script-buttons {display: flex;gap: 10px;margin-bottom: 15px;}.script-btn {flex: 1;padding: 12px 20px;border: none;border-radius: 6px;background: #009FCC;color: white;font-weight: bold;cursor: pointer;transition: all 0.3s;}.script-btn:hover {background: #007799;transform: translateY(-2px);}.script-btn.stop {background: linear-gradient(135deg, #f44336, #d32f2f);}.script-btn.stop:hover {background: linear-gradient(135deg, #d32f2f, #f44336);}.script-btn:disabled {opacity: 0.8;cursor: not-allowed;transform: none;}.script-help {background: rgba(0, 0, 0, 0.3);padding: 15px;border-radius: 6px;border-left: 4px solid #ffd700;}.script-help h4 {color: #dbedf3;margin-bottom: 10px;}.script-help ul {list-style: none;padding: 0;}.script-help li {padding: 5px 0;color: #ccc;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.script-help li:last-child {border-bottom: none;}.script-current {background: rgba(255, 215, 0, 0.2);padding: 2px 6px;border-radius: 3px;margin: 0 2px;}@media (max-width: 768px) {h1 {font-size: 2rem;}.piano-keyboard {height: 250px;}.white-key {min-width: 50px;}.black-key {min-width: 30px;}.key-label {min-font-size: 12px;bottom: 15px;}.black-key .key-label {min-font-size: 10px;bottom: 12px;}.script-buttons {flex-direction: column;}#script-input {height: 60px;font-size: 20px;}.script-help {font-size: 14px;}}.control-item {display: inline-flex;align-items: center;gap: 10px;min-width: 180px;background: rgba(255, 255, 255, 0.1);padding: 8px 12px;border-radius: 20px;}#volume-control {width: 100px;height: 8px;-webkit-appearance: none;background: linear-gradient(to right, #4cc9f0, #4361ee);border-radius: 4px;outline: none;margin: 0 10px;}#volume-control::-webkit-slider-thumb {-webkit-appearance: none;width: 16px;height: 16px;border-radius: 50%;background: white;cursor: pointer;box-shadow: 0 2px 4px rgba(0,0,0,0.2);transition: transform 0.1s;}#volume-control::-webkit-slider-thumb:hover {transform: scale(1.1);}#volume-display{color: #4cc9f0;min-width: 40px;}.speed-controls {float: right;min-width: 247px;}#speed-value {font-weight: bold;color: #3498db;min-width: 40px;margin-right:0p;}
        .navbar{position:fixed;top:0;left:0;width:100%;height:60px;background-color:#fff;box-shadow:0 2px 10px #0000001a;display:flex;justify-content:center;align-items:center;z-index:1000}.nav-container{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:0 30px}.logo{font-size:24px;font-weight:700;color:#333;text-decoration:none}.nav-links{display:flex;gap:30px}.nav-link{position:relative;color:#555;text-decoration:none;font-size:16px;font-weight:500;transition:color .3s ease}.nav-link:hover{color:#06f}.nav-link.active{color:#06f}.nav-link::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background-color:#06f;transition:width .3s ease}.nav-link:hover::after,.nav-link.active::after{width:100%}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;top:100%;left:0;background-color:#fff;min-width:160px;box-shadow:0 8px 16px #0000001a;border-radius:0 0 8px 8px;z-index:1;opacity:0;transform:translateY(-10px);transition:all .3s ease}.dropdown:hover .dropdown-content{display:block;opacity:1;transform:translateY(0)}.dropdown-item{color:#555;padding:12px 16px;text-decoration:none;display:block;transition:all .2s}.dropdown-item:hover{background-color:#f5f5f5;color:#06f;padding-left:20px}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #6A5ACD;margin-left:20px}.avatar-img{width:100%;height:100%;object-fit:cover}.filter-panel{background:linear-gradient(150deg,#00ffff80 0%,#f0f9 100%);color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 12px #0000001a;margin-bottom:5px;text-align:center;font-size:41px}